<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>走吧去旅行</title>

<style>*{panding:0;margin: 0}
   .popup{
       position: absolute;top: 0;left:0;right: 0;background-color: #fcfcfc;z-index:15;display: none
 }
.popup ul{
    list-style-type: disc;
}
.popup li{
    font-size: 1rem;
    margin-left: 1rem;
    border-bottom: 1px solid gainsboro;
    line-height:2rem ;
    list-style-type: none;
}
#shadow{
    position: fixed;
    top:0;bottom:0;left:0;right:0;
    background-color: #4f4f4f;
    opacity: 0.4;
    display: none;
    z-index: 5;
}
.btn{}
#banner {position:relative; width:100%; height:7rem; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;width:100% }
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
    cursor:pointer; width:100%;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:100%;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
    margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer;}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;width: 100%}
</style>
</head>
<body>
<header style="position: relative;z-index: 20;background-color: white">
    <image style="float:left;width: 2rem;height:2rem;" src="./images/top_back.png"/>
    <image id="cat" class="btn" style="float:right;width: 2rem;height:2rem;" src="./images/top_category.png"/>
    <div style="background-color:#fcfcfc;margin: 0 2rem 0 2rem">
        <input style="background: url('./images/search.png');
        background-repeat:no-repeat;
          background-size:2rem;
        background-color: lightgrey;
        width: 100% ;height:2rem; border-radius: 1rem;border:none;line-height: normal;text-align: center;line-height: 22px\9;"
               type="text" placeholder="输入目的地/景点/酒店自由行..."></div>
    </image>
    </image>
    <div style="position: relative;">
        <div class="popup" >
            <ul style="list-style-type: none;padding: 0">
                <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">全部主题</li>
                <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">山水景观</li>
                <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">温泉度假</li>
                <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">酷夏漂流</li>
                <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">亲子庄园</li>

            </ul>
        </div>
    </div>
</header>
<div>
<!--<image style="width: 100%"src="images/commend.jpg"></image>-->
    <div id="banner">
        <div id="banner_bg"></div><!--标题背景-->
        <div id="banner_info"></div><!--标题-->
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="banner_list">
            <a href="#" target="_blank"><img src="images/r_1.jpg"/></a>
            <a href="#" target="_blank"><img src="images/r_2.jpg"/></a>
            <a href="#" target="_blank"><img src="images/r_3.jpg"/></a>
            <a href="#" target="_blank"><img src="images/t_4.jpg"/></a>
        </div>
    </div>
</div>
<div style="line-height:3rem;background-color: #fcfcfc;float: left;width: 49.75%;height: 100%;text-align:center;">
  <img src="images/jd_arr1.png">热门景点

</div>
<div style="line-height:3rem;background-color:#dddddd;float:left;width: 0.5%;height: 1.5rem;margin-top: 1rem">


</div>
<div style="line-height:3rem;background-color: #fcfcfc;float:right;width: 49.75%;height: 100%;text-align:center;">
    <img src="images/jd_arr2.png">我身边

</div>

<div style="line-height:3rem;background-color: #dddddd;height: 0.8rem;width: 100%;float:right;border-top:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9">

</div>
<div   style="line-height:3rem;background-color: #fcfcfc;float: left;width: 33%;height: 100%;text-align:center;">
    位置区域<img class="btn"  style="width: 20% ;" src="images/arr_des08.png">

</div>
<div style="line-height:3rem;background-color:#dddddd;float:left;width: 0.5%;height: 1.5rem;margin-top: 1rem;">


</div>
<div style="line-height:3rem;background-color: #fcfcfc;float:left;width: 33%;height: 100%;text-align:center;">
   达人推荐<img style="width: 20% ;" src="images/arr_des08.png">

</div>
<div style="line-height:3rem;background-color:#dddddd;float:left;width: 0.5%;height: 1.5rem;margin-top: 1rem">


</div>
<div style="line-height:3rem;background-color: #fcfcfc;float:right;width: 33%;height: 100%;text-align:center;">
    全部主题<img style="width: 20% ;" src="images/arr_des08.png">

</div>

<div style="line-height:3rem;background-color: #dddddd;height: 0.05rem;width: 100%;float:right;">

</div>
<div style="position: relative;float: left;width: 100%;height: 3rem">
    <div class="popup" >
        <ul style="list-style-type: none;padding: 0">
            <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">全部主题</li>
            <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">山水景观</li>
            <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">温泉度假</li>
            <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">酷夏漂流</li>
            <li style="height: 2rem;border-bottom:1px solid #b9b9b9;line-height: 2rem;padding-left: 1rem">亲子庄园</li>

        </ul>
    </div>
</div>
<div style="line-height:3rem;float:left;width: 30%;height: 100%;margin-left: 1rem ;margin-top:-2rem" >
    <image style="width: 100%" src="images/jd_pic.jpg"></image>

</div>
<div style="line-height:3rem;float:left;width: 35%;height: 100%;margin-left: 1rem ;margin-top: -2rem"  >
    <p style="margin-top:  -0.5rem;font-size:1.10rem;"><strong>洞头望海楼景区</strong></p>
    <p style="margin-top: -1rem"><span style=" background-color:#ff8941; padding:0px 5px;color: #fcfcfc;">返</span>
        <span style=" background-color:#2ba5eb; padding:0px 5px;color: #fcfcfc;">券</span></p>
    <p style="margin-top: -1rem"><strong>风景名胜</strong></p>
    <p style="margin-top: -1rem;color: #999999"><strong>已售2008</strong></p>

</div>
<div style="line-height:3rem;float:right;width:20%;height: 100%;margin-left: 1rem;margin-top: 1rem;margin-top: -1rem" >
    <span style="font-size: 1.5rem;color: #ff6000"><strong>¥100</strong></span>
    <span style="font-size: 1.05rem;color: #999999;margin-left: -0.5rem;">起</span>
    <p style="font-size: 1.05rem;color: #999999;margin-left: 1.5rem;margin-top: -2rem">¥240</p>

</div>
<div style="background-color: #b9b9b9 ;width: 2rem;height: 0.1rem;position:relative;left: 20rem;top: 12.25rem;"></div>
<div style="line-height:3rem;background-color: #dddddd;height: 0.05rem;width: 100%;float:right;">

</div>
<div style="line-height:3rem;float:left;width: 30%;height: 100%;margin-left: 1rem ;margin-top: 1rem" >
    <image style="width: 100%" src="images/jd_pic.jpg"></image>

</div>
<div style="line-height:3rem;float:left;width: 35%;height: 100%;margin-left: 1rem ;margin-top: 1rem " >
    <p style="margin-top:  -0.5rem;font-size:1.10rem;"><strong>洞头望海楼景区</strong></p>
    <p style="margin-top: -1rem"><span style=" background-color:#ff8941; padding:0px 5px;color: #fcfcfc;">返</span>
        <span style=" background-color:#2ba5eb; padding:0px 5px;color: #fcfcfc;">券</span></p>
    <p style="margin-top: -1rem"><strong>风景名胜</strong></p>
    <p style="margin-top: -1rem;color: #999999"><strong>已售2008</strong></p>

</div>
<div style="line-height:3rem;float:right;width:20%;height: 100%;margin-left: 1rem;margin-top: 2rem" >
    <span style="font-size: 1.5rem;color: #ff6000"><strong>¥100</strong></span>
    <span style="font-size: 1.05rem;color: #999999;margin-left: -0.5rem;">起</span>
    <p style="font-size: 1.05rem;color: #999999;margin-left: 1.5rem;margin-top: -2rem">¥240</p>
</div>
<div style="background-color: #b9b9b9 ;width: 2rem;height: 0.1rem;position:relative;left: 20rem;top:21.75rem;"></div>
<div style="line-height:3rem;background-color: #dddddd;height: 0.05rem;width: 100%;float:right;">

</div>
<div style="line-height:3rem;float:left;width: 30%;height: 100%;margin-left: 1rem ;margin-top: 1rem" >
    <image style="width: 100%" src="images/jd_pic.jpg"></image>

</div>
<div style="line-height:3rem;float:left;width: 35%;height: 100%;margin-left: 1rem ;margin-top: 1rem " >
    <p style="margin-top:  -0.5rem;font-size:1.10rem;"><strong>洞头望海楼景区</strong></p>
    <p style="margin-top: -1rem"><span style=" background-color:#ff8941; padding:0px 5px;color: #fcfcfc;">返</span>
        <span style=" background-color:#2ba5eb; padding:0px 5px;color: #fcfcfc;">券</span></p>
    <p style="margin-top: -1rem"><strong>风景名胜</strong></p>
    <p style="margin-top: -1rem;color: #999999"><strong>已售2008</strong></p>

</div>
<div style="line-height:3rem;float:right;width:20%;height: 100%;margin-left: 1rem;margin-top: 1rem;margin-top: 2rem" >
    <span style="font-size: 1.5rem;color: #ff6000"><strong>¥100</strong></span>
    <span style="font-size: 1.05rem;color: #999999;margin-left: -0.5rem;">起</span>
    <p style="font-size: 1.05rem;color: #999999;margin-left: 1.5rem;margin-top: -2rem">¥240</p>
</div>
<div style="background-color: #b9b9b9 ;width: 2rem;height: 0.1rem;position:relative;left: 20rem;top:31.25rem;"></div>
<div style="line-height:3rem;background-color: #dddddd;height: 0.05rem;width: 100%;float:right;">

</div>
<div style="line-height:3rem;float:left;width: 100%;height: 100%;text-align:center;color: #999999 ">点击查看更多...</div>
<div style="line-height:3rem;background-color: #dddddd;height: 0.05rem;width: 100%;float:right;"></div>
<fowder style="height: 6rem;position: fixed;left: 0;right: 0;bottom: 0;z-index: -5" >

    <div style="line-height:3rem;float:left;width:25%;height: 50%;margin-top: 1rem;text-align:center;" >
    <image style="width: 50%" src="images/bottom_home_click.png"></image>
</div>
    <div style="line-height:3rem;float:left;width:25%;height: 50%;margin-top: 1rem;text-align:center;" >
        <image style="width: 50%" src="images/bottom_find.png"></image>
    </div>
    <div style="line-height:3rem;float:left;width:25%;height:50%;margin-top: 1rem;text-align:center;" >
        <image style="width: 50%" src="images/bottom_shop.png"></image>
    </div>
    <div style="line-height:3rem;float: right;width:25%;height: 50%;margin-top: 1rem;text-align:center;" >
        <image style="width: 50%" src="images/bottom_mine.png"></image>
    </div>
    <div style="line-height:3rem;float:left;width:25%;height: 50%;margin-top: -1rem;text-align:center;color: #008aff;" >
        首页
    </div>
    <div style="line-height:3rem;float:left;width:25%;height: 50%;margin-top:-1rem;text-align:center;color: #a7a7a7;" >
    发现
    </div>
    <div style="line-height:3rem;float:left;width:25%;height: 50%;margin-top:-1rem;text-align:center;color:#a7a7a7;" >
       购物车
    </div>
    <div style="line-height:3rem;float: right;width:25%;height: 50%;margin-top:-1rem;text-align:center;color: #a7a7a7;" >
        我的
    </div>
</fowder>
<div id="shadow"></div>
<script src="jquery-1.11.3.js"></script>
<script>
    $(function(){
        $(".btn").click(function(){//$用法1
            console.log(this);
            console.log($(this)); //$用法2
            var index=$(".btn").index(this);//事件发生在谁身上 dom对象就在this这里
            var cat=document.getElementById("cat")

            if($(".popup").eq(index).css("display")=='none') {
                $(".popup").eq(index).css("display", "block");
                $("#shadow").css("display","block");
            } else{
                $(".popup").eq(index).css("display", "none");
                $("#shadow").css("display","none");
            }
        })
    });

    var t = n =0, count;
   $(document).ready(function(){
       count=$("#banner_list a").length;
       $("#banner_list a:not(:first-child)").hide();
       $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
       $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
       $("#banner li").click(function() {
           var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
           n = i;
           if (i >= count) return;
           $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
           $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
           $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
           document.getElementById("banner").style.background="";
           $(this).toggleClass("on");
           $(this).siblings().removeAttr("class");
       });
       t = setInterval("showAuto()", 4000);
       $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
   })

   function showAuto()
   {
       n = n >=(count -1) ?0 : ++n;
       $("#banner li").eq(n).trigger('click');
   }
</script>
</body>
</html>